<template>
	<!-- https://api.qingnian8.com/ -->
	<view class="homeLayout pageBg">
		<xxmCustomNavNar title="推荐"></xxmCustomNavNar>
		<!-- 轮播图 -->
		<view class="banner">
			<swiper interval="3000" indicator-dots autoplay circular indicator-active-color="#ffffff" indicator-color="rgba(255,255,255,0.5)">
				<swiper-item v-for="item in bannerList" :key="item._id">
					<image mode="aspectFill" :src="item.picurl"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 公告 -->
		<view class="notice">
			<view class="left">
				<uni-icons size="20" class="icon" type="sound-filled"></uni-icons>
				<text>公告</text>
			</view>
			<view class="center">
				<swiper autoplay interval="2000" circular vertical>
					<swiper-item v-for="i in 3" :key="i">
						<view>本人学习使用代码参考b站咸虾米博主</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="right">
				<uni-icons  size="20" color="#a7a7a7" type="forward"></uni-icons>
			</view>
		</view>
		<view class="selected">
			<xxmSelected>
				<uni-icons type="calendar" size="18"></uni-icons>
				<view class="textSize">
					<uni-dateformat :date="new Date()" format="dd日"></uni-dateformat>
				</view>
			</xxmSelected>
			
			<view class="content">
				<scroll-view scroll-x class="scrollView">
					<view  class="box" v-for="item in randomWallList" :key="item.classid">
						<image @click="onBoxClick(item._id)" :src="item.smallPicurl" mode="aspectFill"></image>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="theme">
			<xxmSelected title="分类">
				<navigator class="more" url="#">More+</navigator>
			</xxmSelected>
			
			<view class="content">
				<xxmThemeItem v-for="item in classifyList" :key="item._id" :item="item"></xxmThemeItem>
				<xxmThemeItem :isMore="true"></xxmThemeItem>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	import {onShareAppMessage,onShareTimeline} from '@dcloudio/uni-app'
	import {getHomeBanner,getRandomWall,getClassifyApi} from '@/api/apis.js'
	import { usePreviewStore } from '@/store/preview.js'
	
	const {setClassList} = usePreviewStore()
	
	const onBoxClick = id => {
		setClassList(randomWallList.value)
		uni.navigateTo({
			url:'/pages/preview/preview?_id='+id
		})
	}
	
	onShareAppMessage(e => {
		return {
			title: "好看的壁纸推荐",
			path:'/pages/index/index'
		}
	})
	onShareTimeline(() => {
		return{
			title:"好看的壁纸推荐",
		}
	})
	
	
	//轮播图图片
	const bannerList = ref([])
	const getHomeBannerApi = async () => {
		const res = await getHomeBanner()
		bannerList.value = res
	}
	getHomeBannerApi()
	
	//每日推荐图片
	const randomWallList = ref([])
	const getRandomWallApi = async () => {
		const res = await getRandomWall()
		randomWallList.value = res
	}
	getRandomWallApi()
	
	//分类
	const classifyList = ref([])
	const getClassify = async () => {
		const res = await getClassifyApi({
			pageSize:8
		})
		classifyList.value = res
	}
	getClassify()
	
</script>

<style lang="scss" scoped>
	.homeLayout{
		.banner{
			width: 100%;
			padding: 30rpx 0;
			swiper{
				width: 100%;
				height: 340rpx;
				swiper-item{
					padding: 0 30rpx;
					image{
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}
				
			}
		}
		.notice{
			display: flex;
			align-items: center;
			height: 80rpx;
			margin: 0 30rpx;
			background-color: #f9f9f9;
			border-radius: 80rpx;
			text{
				margin-left: 4rpx;
			}
			.left{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 140rpx;
				height: 100%;
				font-size: 30rpx;
				margin-right: 10rpx;
				color: $brand-theme-color;
				:deep(){
					.uni-icons{
						color: $brand-theme-color !important;
					}
				}
			}
			.center{
				flex: 1;
				height: 100%;
				swiper{
					width: 100%;
					height: 100%;
					swiper-item{
						width: 100%;
						height: 100%;
						display: flex;
						align-items: center;
						font-size: 30rpx;
						color: #606060;
						view{
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
			}
			.right{
				padding: 20rpx;
			}
		}
		.textSize{
			color: $brand-theme-color;
		}
		.selected{
			:deep(){
				.uni-icons{
					color: $brand-theme-color !important;
				}
			}
			.textSize{
				display: inline;
				margin-left: 5rpx;
			}
			.content{
				width: 720rpx;
				margin-left: 30rpx;
				.scrollView{
					white-space: nowrap;
					.box{
						width: 200rpx;
						height: 430rpx;
						display: inline-block;
						margin-right: 15rpx;
						border-radius: 10rpx;
						overflow: hidden;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.box:last-child{
						margin-right: 30rpx;
					}
				}
			}
		}
		.theme{
			navigator{
				font-size: 32rpx;
				color: #888;
				}
				.content{
					padding: 0 30rpx 50rpx;
					display: grid;
					gap: 15rpx;
					grid-template-columns: repeat(3,1fr);
			}
		}
	}
	
</style>
